<template>
  <div class="app-container">
    <el-form :inline="true" ref="ruleForm" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-col :span="6">
          <el-form-item prop="dateType">
            <el-select v-model="formInline.dateType" placeholder="请选择时间范围">
              <el-option :label="$t('language.finance.recharge.rechargeTime')" :value="1"></el-option>
              <el-option :label="$t('language.finance.recharge.arrivalTime')" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item  prop="time">
            <el-date-picker
              v-model="formInline.time"
              type="datetimerange"
              align="right"
              unlink-panels
              :range-separator="$t('language.finance.recharge.to')"
              :start-placeholder="$t('language.finance.recharge.startDate')"
              :end-placeholder="$t('language.finance.recharge.endDate')"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerDayStep">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item :label="$t('language.finance.recharge.depositAmount')">
        <el-col :span="11">
          <el-form-item prop="minAmount">
            <el-input @keyup.enter.native="formatSearch" v-model="formInline.minAmount" type="number" :placeholder="$t('language.finance.recharge.inputPrompt')"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2" style="text-align: center;">-</el-col>
        <el-col :span="11">
          <el-form-item prop="maxAmount">
            <el-input @keyup.enter.native="formatSearch" v-model="formInline.maxAmount" type="number" :placeholder="$t('language.finance.recharge.inputPrompt')"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item :label="$t('language.finance.recharge.depositType')" prop="limitType">
        <el-select
          v-model="formInline.limitType"
          :placeholder="$t('language.finance.publicFilters.selectDeposit')"
        >
          <el-option
            v-for="item in $t('language.finance.consts.DEPOSIT_TYPE')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('language.finance.recharge.operationEnd')" prop="clientType">
        <el-select v-model="formInline.clientType" :placeholder="$t('language.finance.recharge.operationEndPrompt')">
          <el-option
            v-for="item in $t('language.finance.consts.PAYMENT_PLATFORM')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
       <el-form-item :label="$t('language.finance.recharge.receiptMerchant')" prop="merchant">
        <el-select v-model="formInline.merchant" filterable :placeholder="$t('language.finance.recharge.SelectMerchant')">
          <el-option
            v-for="(item, index) in rechargeShopList"
            :label="item.channelName"
            :key="index"
            :value="item.channelId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('language.finance.recharge.paymentStatus')" prop="status">
        <el-select
          multiple
          collapse-tags
          v-model="formInline.status"
          :placeholder="$t('language.finance.publicFilters.selectPaymentStatus')">
          <el-option
            v-for="item in $t('language.finance.consts.LOG_PAYMENT_STATUS')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('language.finance.recharge.paymentTypes')" prop="paymentId">
        <el-select v-model="formInline.paymentId" :placeholder="$t('language.finance.publicFilters.selectPaymentType')">
          <el-option
            v-for="item in $t('language.finance.consts.RECHARGE_THIRD_TYPE_NAMES')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="with-pre-select" prop="keywords">
        <el-input @keyup.enter.native="formatSearch" :placeholder="$t('language.finance.publicFilters.keyword')"  v-model="formInline.keywords" class="input-with-select">
          <el-select
            @change="searchTypeChange"
            v-model="formInline.searchType" slot="prepend" placeholder="查询范围">
            <el-option :label="$t('language.finance.recharge.rechargeNumber')" :value="1"></el-option>
            <el-option :label="$t('language.finance.recharge.accountName')" :value="2"></el-option>
            <el-option :label="$t('language.finance.recharge.name')"  :value="3"></el-option>
            <el-option :label="$t('language.finance.recharge.phoneNumber')" :value="4"></el-option>
            <el-option :label="$t('language.finance.recharge.receiptMerchantNumber')" :value="5"></el-option>
            <el-option :label="$t('language.finance.recharge.thirdPartyRechargeOrderNumber')" :value="6"></el-option>
            <el-option :label="$t('language.finance.recharge.patchUpVerifier')" :value="7"></el-option>
          </el-select>
          <!--<el-button slot="append" icon="el-icon-search"></el-button>-->
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('language.finance.recharge.accountType')"  prop="userType">
        <el-select
          v-model="formInline.userType"
          :placeholder="$t('language.finance.publicFilters.accountType')"
        >
          <el-option
            v-for="item in $t('language.finance.consts.USER_TYPE')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('language.finance.recharge.level')" prop="level">
        <el-select v-model="formInline.levelList" multiple collapse-tags :placeholder="formInline.levelList?'':$t('language.finance.publicFilters.selectLevel')">
          <el-option
            v-for="item in levelList"
            :label="item.name"
            :key="item.levelId"
            :value="item.levelId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="formatSearch"
      >
        {{ $t('language.table.search') }}
      </el-button>
      <el-button @click="selfResetForm('ruleForm')">{{ $t('language.table.reset') }}</el-button>
    </el-form>
    <div class="button-group" style="padding: 20px 0">
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-download"
          @click="exportHandle"
          :loading="downLoadLoading"
        >
          {{ $t('language.table.export') }}
        </el-button>
      <div class="down-percentage" v-show="showDownPercentage">
        <span>报表导出中：</span>
        <el-progress :percentage="percentage"></el-progress>
      </div>
    </div>
  </div>

</template>

<script>

// services
import { getUserLevelList } from '@/services/api/userLevel';
import { getUserGroupList } from '@/services/api/userGroup';
import { getPaymentManageChannelList } from '@/services/api/recharge';
// import { getAuditApplierList, getAuditManList } from '@/services/api/audit';

// mixins
import { form, grid, pickerOption } from '@/build';
import setOrderStatus from './mixins/setOrderStatus';

export default {
  name: 'form-filter',
  mixins: [form, grid, pickerOption, setOrderStatus],
  props: {
    percentage: {
      type: Number,
      default: 0,
    },
    showDownPercentage: {
      type: Boolean,
      default: false,
    },
    downLoadLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      auditApplyList: [],
      levelList: [],
      rechargeShopList: [],
      groupList: [],
      formInline: {
        dateType: 1,
        searchType: 1,
        limitType: -1,
        clientType: -1,
        time: [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
        minAmount: undefined,
        maxAmount: undefined,
        merchant: undefined,
        paymentId: -2,
        status: [0, 1, 2, 3, 4, 5, 6, 7],
        keywords: undefined,
        userType: -1,
        levelList: [],
      },

    };
  },

  methods: {
    formatSearch() {
      let { status } = this.formInline;
      const data = this._formatData();
      if (status.length === 0) {
        status = [0, 1, 2, 3, 4, 5, 6, 7];
      }
      // 7 代表 补单审核中，传值时会转换为 3
      const filters = this.setOrderStatus({ ...data, status }, [0, 7], [1, 2, 3, 4, 5, 6]);
      if (filters.status && filters.status.indexOf('7') > -1) {
        filters.status = filters.status.replace(/7/, '3');
      }
      this.$emit('on-filter', { ...data, ...filters });
    },
    searchTypeChange() {
      this.formInline.keywords = undefined;
    },
    selfResetForm(formName) {
      this.resetForm(formName);
      this.formatSearch();
    },
    exportHandle() {
      const data = this._formatData();
      this.$emit('on-export', data);
    },
    _formatData() {
      if (this.formInline.levelList && this.formInline.levelList.length > 0) {
        let level = '';
        level = this.formInline.levelList.join();
        this.formInline = { ...this.formInline, level };
      }
      return { ...this.formInline };
    },
  },
  mounted() {
    // this.bindGet(getAuditApplierList, 'auditApplyList', {});
    this.bindGet(getPaymentManageChannelList, 'rechargeShopList', { });
    this.bindGet(getUserLevelList, 'levelList', { });
    this.bindGet(getUserGroupList, 'groupList', { });// todo 2-获取群组
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
  .with-pre-select {
    .el-input-group__prepend {
      .el-select {
        width: 120px;
      }
    }
  }

  .money-range {
    .el-input {
      width: 100px;
    }
  }
  .button-group{
    display: flex;
    .down-percentage{
      width: 200px;
      margin-left: 10px;
      span{
        font-size: 14px;
      }
    }
  }
</style>
